<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<title>楼栋管理</title>
		<link rel="stylesheet" href="../../lib/element-ui/theme-chalk/index.css">
		<link rel="stylesheet" href="../../lib/vxe-table/index.css">
		<link rel="stylesheet" href="../../lib/vxe-table-plugin-element/style.css">
		<link rel="stylesheet" href="../../lib/font-awesome/css/font-awesome.min.css">
		<script type="text/javascript" src="../../lib/vue/vue.js"></script>
		<script type="text/javascript" src="../../lib/xe-utils/xe-utils.js"></script>
		<script type="text/javascript" src="../../lib/element-ui/index.js"></script>
		<script type="text/javascript" src="../../lib/vxe-table/index.js"></script>
		<script type="text/javascript" src="../../lib/vxe-table-plugin-element/index.js"></script>
		<script type="text/javascript" src="../../lib/xlsx/xlsx.full.min.js"></script>
		<script type="text/javascript" src="../../lib/vxe-table-plugin-export-xlsx/index.min.js"></script>
		<script type="text/javascript" src="../../lib/xe-ajax/xe-ajax.js"></script>
		<script type="text/javascript" src="../../static/js/jquery.min.js"></script>
		<script type="text/javascript" src="../../static/js/webApi.js"></script>
		<script type="text/javascript" src="../../static/js/tool.js"></script>
		<style type="text/css">
			/*
		        找到html标签、body标签，和挂载的标签
		        都给他们统一设置样式
		    */
			html,
			body,
			#app,
			.el-container {
				/*设置内部填充为0，几个布局元素之间没有间距*/
				padding: 0px;
				/*外部间距也是如此设置*/
				margin: 0px;
				/*统一设置高度为100%*/
				height: 100%;
			}

			.el-main {
				padding: 4px;
			}

			.class001>input {
				text-align: center;
			}
		</style>
	</head>
	<body>
		<el-container id="app">
			<el-main>
				<el-main>
					<el-form :inline="true" :model="queryData" ref="queryData" label-width="80px" label-position="right"
						size="mini" style="height: 35px;border: 1px solid #e8eaec;">
						<el-form-item label="小区名称">
							<el-autocomplete class="inline-input" v-model="queryData.name" clearable
								:fetch-suggestions="querySearch" placeholder="请选择小区" @select="handleSelect"
								@clear="clear">
							</el-autocomplete>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" icon="el-icon-search" @click="searchEvent">查询
							</el-button>
						</el-form-item>
					</el-form>

					<vxe-grid border ref="xGrid" resizable show-overflow highlight-hover-row highlight-current-row
						keep-source :height="tableHeight" size="mini" :toolbar="tableToolbar"
						:edit-config="{trigger:'click', mode:'row'}" :data="tableData"
						:radio-config="{labelField: 'name', trigger: 'row'}"
						:header-cell-style="{'text-align':'center'}" @toolbar-button-click="toolbarButtonClickEvent">
						<vxe-table-column type="radio" width="50" headerAlign="center" align="center">
						</vxe-table-column>
						<vxe-table-column field="buildname" title="楼栋/单元" width="120" headerAlign="center"
							align="center">
						</vxe-table-column>
						<vxe-table-column field="build_mamager" title="楼栋负责人" width="120" headerAlign="center"
							align="center">
						</vxe-table-column>
						<vxe-table-column field="area_name" title="所属小区" width="300" headerAlign="center"
							align="center">
						</vxe-table-column>
						<vxe-table-column field="floor_num" title="楼层数" width="100" headerAlign="center" align="center">
						</vxe-table-column>
						<vxe-table-column field="house_number" title="层户数" width="100" headerAlign="center"
							align="center">
						</vxe-table-column>
						<vxe-table-column field="create_user_name" title="创建人" width="120" headerAlign="center"
							align="center">
						</vxe-table-column>
						<vxe-table-column field="create_user" title="工号" width="120" headerAlign="center"
							align="center">
						</vxe-table-column>
						<vxe-table-column field="create_time" width="180" title="创建日期" headerAlign="center"
							align="center" :formatter="formatDate"></vxe-table-column>
						</vxe-table-column>
						<vxe-table-column field="update_user_name" title="修改人" width="120" headerAlign="center"
							align="center">
						</vxe-table-column>
						<vxe-table-column field="update_time" width="180" title="修改时间" headerAlign="center"
							align="center" :formatter="formatDate"></vxe-table-column>
						</vxe-table-column>
						<vxe-table-column title="操作" width="180" headerAlign="center" align="center" fixed="right"
							show-overflow>
							<template v-slot="{ row }">
								<vxe-button v-if="row.orgCode!= '01'" type="text" icon="fa fa-edit vxe-primary-color"
									@click="editEvent(row)" title="编辑"></vxe-button>
								<vxe-button v-if="row.orgCode!= '01'" type="text" icon="fa fa-trash-o vxe-danger-color"
									@click="removeEvent(row)" title="删除"></vxe-button>
								<vxe-button v-if="row.orgCode!= '01'" type="text" icon="el-icon-office-building"
									@click="roomManagement(row)" title="房间管理"></vxe-button>
							</template>
						</vxe-table-column>
					</vxe-grid>

					<vxe-pager style="margin-bottom: 20px;padding-top: 10px;" background :page-size.sync="pageSizeHouse"
						:current-page.sync="currentPageHouse" :total="totalSize" @page-change="handleCurrentChange"
						size="mini"
						:layouts="['Sizes','PrevJump', 'PrevPage', 'JumpNumber', 'NextPage', 'NextJump','FullJump', 'Total']">
					</vxe-pager>

					<vxe-modal v-model="isShowModel" :title="isAddOrUpdate ? '新增楼栋信息' : '编辑楼栋信息' " :width="modelWith"
						:height="modelHeight" @close="clseModel" show-zoom resize>
						<template #default>
							<el-form :model="formData" :rules="formRules" ref="ruleForm" label-width="100px"
								class="demo-ruleForm" style="padding: 50px;">
								<el-form-item label="小区名称" prop="villageName">
									<!-- <el-input placeholder="请输入小区名称" :disabled="disabled"
										v-model="formData.villageName.label" style="width: 400px;"></el-input> -->
									<el-autocomplete class="inline-input" v-model="formData.villageName.label"
										:disabled="disabled" :fetch-suggestions="querySearch" placeholder="请选择小区"
										@select="addHandleSelect" style="width: 380px;" clearable>
									</el-autocomplete>
								</el-form-item>
								<el-form-item label="楼栋/单元">
									<div style="width: auto;height: 40px;float: left">
										<el-input v-model="formData.qishu" class="class001" type="number"
											style="float: left;width: 170px;border-color: white;position: relative;text-align: center;"
											placeholder="请输入"></el-input>
										<div style="padding: 0px 10px;position: absolute;">第</div>
										<div style="position: absolute;margin-left: 120px;">期</div>
									</div>
									<div style="width: auto;height: 40px;float: left;margin-left: 10px;">
										<el-form-item label="" prop="ridgepole">
											<el-input v-model="formData.ridgepole" class="class001" type="number"
												style="float: left;width: 200px;border-color: white;position: relative;text-align: center;"
												placeholder="请输入"></el-input>
											<div style="padding: 0px 5px;position: absolute;">第</div>
											<div style="position: absolute;margin-left: 120px;">栋/单元</div>
										</el-form-item>
									</div>
								</el-form-item>
								<el-form-item label="楼层情况">
									<div style="width: auto;height: 40px;float: left">
										<el-form-item label="" prop="layerNumber">
											<el-input v-model="formData.layerNumber" class="class001" type="number"
												style="float: left;width: 170px;border-color: white;position: relative;text-align: center;"
												placeholder="请输入"></el-input>
											<div style="padding: 0px 10px;position: absolute;">每层</div>
											<div style="position: absolute;margin-left: 120px;">户</div>
										</el-form-item>
									</div>
									<div style="width: auto;height: 40px;float: left;margin-left: 10px;">
										<el-form-item label="" prop="floorsNumber">
											<el-input v-model="formData.floorsNumber" class="class001" type="number"
												style="float: left;width: 200px;border-color: white;position: relative;text-align: center;"
												placeholder="请输入"></el-input>
											<div style="padding: 0px 5px;position: absolute;">共</div>
											<div style="position: absolute;margin-left: 140px;">层</div>
										</el-form-item>
									</div>
								</el-form-item>
								<el-form-item label="楼栋负责人" prop="buildingManager">
									<!-- <el-autocomplete class="inline-input" v-model="formData.buildingManager.label"
										:fetch-suggestions="buildquerySearch" placeholder="请选择楼栋负责人"
										@select="addBuildingManager" style="width: 380px;" clearable>
									</el-autocomplete> -->
									<el-select v-model="formData.buildingManager" filterable placeholder="请选择楼栋负责人" style="width: 380px;" clearable>
										<el-option v-for="item in buildingManagementList" :key="item.value" :label="item.label"
											:value="item.id">
										</el-option>
									</el-select>
								</el-form-item>
								<el-form-item style="text-align: right;">
									<el-button type="primary" @click="submitForm('ruleForm')" :loading="loading">保存
									</el-button>
									<el-button @click="resetForm('ruleForm')">重置</el-button>
								</el-form-item>
							</el-form>
						</template>
					</vxe-modal>

				</el-main>
		</el-container>
	</body>

	<script>
		window.onload = function() {
			var main = {
				data() {
					return {
						disabled: false,
						restaurants: [], //搜索小区列表
						queryData: {
							name: null
						},
						tableHeight: 500,
						pageSizeHouse: 10, //每页显示的条数
						currentPageHouse: 1, //当前第几页
						totalSize: 0, //总页数
						// tablePage: {
						// 	perfect: true,
						// 	total: 0,
						// 	currentPage: 1,
						// 	pageSize: 15,
						// 	align: 'right',
						// 	pageSizes: [15, 30, 45, 60, 75, 90],
						// 	layouts: ['Sizes', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'FullJump',
						// 		'Total'
						// 	],
						// },
						tableToolbar: {
							buttons: [{
								code: 'addBuild',
								name: '新增楼栋',
								status: 'perfect',
								icon: 'fa fa-plus vxe-primary-color'
							}, ],
							refresh: false,
							perfect: true,
							custom: true
						},
						// tableProxy: {
						// 	props: {
						// 		result: 'data.rows',
						// 		total: 'data.total'
						// 	},
						// 	ajax: {
						// 		// 任何支持 Promise API 的库都可以对接（fetch、jquery、axios、xe-ajax） page 对象： { pageSize, currentPage }
						// 		query: ({
						// 			page,
						// 			sort,
						// 			filters
						// 		}) => {
						// 			return XEAjax.post(
						// 				`${curlFinance}/Build/getBuildList?currentPage=${page.currentPage}&pageSize=${page.pageSize}&areaId=` +
						// 				this.AreaID);
						// 		}
						// 	}
						// },
						isShowModel: false,
						isAddOrUpdate: 1, // 1:新增   0:编辑
						modelWith: '50%',
						modelHeight: '70%',
						formData: {
							villageName: {
								label: "",
								value: "",
								id: ""
							},
							ridgepole: null,
							layerNumber: null,
							floorsNumber: null,
							qishu: null,
							buildingManager: null
						},
						formRules: {
							villageName: [{
								required: true,
								message: '暂无小区名称',
								trigger: ['blur', 'change']
							}],
							ridgepole: [{
								required: true,
								message: '楼栋/单元必填',
								trigger: ['blur', 'change']
							}],
							layerNumber: [{
								required: true,
								message: '请输入层户数',
								trigger: 'blur'
							}],
							floorsNumber: [{
								required: true,
								message: '请输入楼层数',
								trigger: 'blur'
							}],
						},
						AreaID: "",
						loading: false,
						buildingManagementList: [],
						tableData: [],
					}
				},
				created() {
					this.getBuildList()
					this.getXqWyQuery()
				},
				mounted() {
					this.tableHeight = window.innerHeight - this.$refs.xGrid.$el.offsetTop - 75;
				},
				methods: {
					getBuildList() {
						this.tableData = []
						XEAjax.post(`${curlFinance}/Build/getBuildList?currentPage=` + this.currentPageHouse +
							'&pageSize=' + this.pageSizeHouse + '&areaId=' + this
							.AreaID).then(data => {
							if (data.code == 200) {
								this.tableData = data.data.rows
								this.totalSize = data.data.total
							} else {
								this.$XModal.message({
									message: '获取数据失败',
									status: 'error'
								});
							}
						});
					},
					toolbarButtonClickEvent({
						code
					}, event) {
						switch (code) {
							case 'addBuild':
								this.queryData.name == null || this.queryData.name == "" || !(this.queryData.name) ?
									this.disabled = false : this.disabled = true
								this.disabled == true ? this.getbuildmanager() : ''
								this.isShowModel = true
								this.isAddOrUpdate = 1
								break;
						}
					},
					formatDate({
						cellValue
					}) {
						return XEUtils.toDateString(cellValue, 'yyyy-MM-dd HH:MM:ss')
					},
					searchEvent() {
						this.getBuildList()
					},
					querySearch(queryString, cb) {
						var restaurants = this.restaurants;
						var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
						// 调用 callback 返回建议列表的数据
						cb(results);
					},
					createFilter(queryString) {
						return (restaurant) => {
							return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
						};
					},
					handleSelect(item) {
						this.disabled = true
						this.formData.villageName = item
						this.AreaID = item.id
					},
					addHandleSelect(item) {
						this.formData.villageName = item
						this.getbuildmanager()
					},
					getXqWyQuery() {
						XEAjax.post(`${curlFinance}/xqWy/getXqWyQuery?currentPage=1&pageSize=5000`, {}).then(data => {
							if (data.code == 200) {
								let optionList = data.data.rows;
								let newOptionList = []
								for (let i in optionList) {
									newOptionList.push({
										'label': optionList[i].area_name,
										"value": optionList[i].area_name,
										"id": optionList[i].area_id,
									})
								}
								if (newOptionList.length > 1) {
									this.restaurants = newOptionList
									this.disabled = false
								} else {
									this.restaurants = newOptionList
									this.queryData.name = newOptionList[0].label
									this.AreaID = newOptionList[0].id
									this.formData.villageName = newOptionList[0]
									this.disabled = true
								}
							} else {
								this.$XModal.message({
									message: data.msg,
									status: 'error'
								});
							}
						});
					},
					submitForm(formName) {
						this.$refs[formName].validate((valid) => {
							if (valid) {
								this.isAddOrUpdate ? this.buildAdd() : this.buildUpdate()
							} else {
								return false;
							}
						});
					},
					resetForm(formName) {
						//this.$refs[formName].resetFields();
						this.formData.ridgepole = null
					},
					clseModel() {
						if (this.restaurants.length > 1 && this.queryData.name == null) {
							this.formData = {
								villageName: {
									label: "",
									value: "",
									id: "",
								},
								ridgepole: null,
								layerNumber: null,
								floorsNumber: null,
								buildingManager: null
							}
						} else {
							this.formData.ridgepole = null
							this.formData.layerNumber = null
							this.formData.floorsNumber = null
							this.formData.qishu = null
							this.formData.buildingManager = null
						}
					},
					buildAdd() {
						this.loading = true
						let buildname = ""
						if (this.formData.qishu == null || this.formData.qishu == "" || !(this.formData.qishu)) {
							buildname = this.formData.ridgepole + '栋'
						} else {
							buildname = this.formData.qishu + '期' + this.formData.ridgepole + '栋'
						}
						let params = {
							buildid: "",
							buildname: buildname,
							floorNum: this.formData.floorsNumber,
							houseNumber: this.formData.layerNumber,
							xqid: this.formData.villageName.id,
							manageUser: this.formData.buildingManager
						}
						console.log(params)
						XEAjax.post(`${curlFinance}/Build/buildAdd`, params).then(res => {
							if (res.code == 200) {
								this.$message({
									message: res.msg,
									type: 'success'
								})
								this.loading = false
								this.isShowModel = false
								if (this.restaurants.length > 1 && this.queryData.name == null) {
									this.formData = {
										villageName: {
											label: "",
											value: "",
											id: "",
										},
										ridgepole: null,
										layerNumber: null,
										floorsNumber: null,
										buildingManager: null
									}
								} else {
									this.formData.ridgepole = null
									this.formData.layerNumber = null
									this.formData.floorsNumber = null
									this.formData.qishu = null
									this.formData.buildingManager = null
								}
								this.getBuildList()
							} else {
								this.$message({
									message: res.msg,
									type: 'error'
								})
								this.loading = false
							}
						});
					},
					buildUpdate() {
						let buildname = ""
						if (this.formData.qishu == null || this.formData.qishu == "" || !(this.formData.qishu)) {
							buildname = this.formData.ridgepole + '栋'
						} else {
							buildname = this.formData.qishu + '期' + this.formData.ridgepole + '栋'
						}
						let params = {
							buildid: this.formData.buildid,
							buildname: buildname,
							floorNum: this.formData.floorsNumber,
							houseNumber: this.formData.layerNumber,
							xqid: this.formData.villageName.id,
							manageUser: this.formData.buildingManager
						}
						XEAjax.post(`${curlFinance}/Build/buildingUpdate`, params).then(res => {
							if (res.code == 200) {
								this.$message({
									message: res.msg,
									type: 'success'
								})
								this.isShowModel = false
								if (this.restaurants.length > 1 && this.queryData.name == null) {
									this.formData = {
										villageName: {
											label: "",
											value: "",
											id: "",
										},
										ridgepole: null,
										layerNumber: null,
										floorsNumber: null,
										buildingManager: null
									}
								} else {
									this.formData.ridgepole = null
									this.formData.layerNumber = null
									this.formData.floorsNumber = null
									this.formData.qishu = null
									this.formData.buildingManager = null
								}
								this.getBuildList()
							} else {
								this.$message({
									message: res.msg,
									type: 'error'
								})
							}
						});
					},
					editEvent(row) {
						console.log(row)
						this.formData = {
							villageName: {
								'label': row.area_name,
								"value": row.area_name,
								"id": row.xqid,
							},
							qishu: this.getCaption(row.buildname, 0),
							ridgepole: this.getCaptionBuild(row.buildname, 0),
							layerNumber: row.house_number,
							floorsNumber: row.floor_num,
							buildid: row.buildid,
							buildingManager: row.manage_user
						}
						this.getbuildmanager()
						this.isAddOrUpdate = 0
						this.disabled = true
						this.isShowModel = true
					},
					removeEvent(row) {
						let params = {
							buildid: row.buildid,
						}
						this.$XModal.confirm('确定要删除该数据？').then(type => {
							if (type == 'confirm') {
								XEAjax.post(`${curlFinance}/Build/buildingDelete`, params).then(res => {
									if (res.code == 200) {
										this.$message({
											message: '删除成功',
											type: 'success'
										})
										this.getBuildList()
									} else {
										this.$message({
											message: res.msg,
											type: 'error'
										})
									}
								});
							}
						})
					},
					getCaption(obj, state) {
						if (obj.indexOf("期") != -1 && obj.indexOf("栋") != -1) {
							var index = obj.lastIndexOf("期");
							if (state == 0) {
								obj = obj.substring(0, index);
							} else {
								obj = obj.substring(index + 1, obj.length);
							}
							return obj;
						}

						if (obj.indexOf("期") == -1 && obj.indexOf("栋") != -1) {
							return "";
						}
					},
					getCaptionBuild(obj, state) {
						if (obj.indexOf("期") != -1 && obj.indexOf("栋") != -1) {
							var index = obj.lastIndexOf("期");
							var index1 = obj.lastIndexOf("栋");
							if (state == 0) {
								obj = obj.substring(index + 1, index1)
							} else {
								obj = obj.substring(index + 1, obj.length);
							}
							return obj;
						}

						if (obj.indexOf("期") == -1 && obj.indexOf("栋") != -1) {
							var index = obj.lastIndexOf("栋");
							if (state == 0) {
								obj = obj.substring(0, index);
							} else {
								obj = obj.substring(index + 1, obj.length);
							}
							return obj;
						}
					},
					roomManagement(row) {
						setTimeout(() => {
							Tool.openTabEvent('../question/roomManagement.html', '房间管理', {
								'id': row.buildid,
								'buildname': encodeURIComponent(row.buildname),
								'areaId': row.xqid,
							});
						}, 300)
					},
					clear() {
						this.AreaID = ""
						this.formData.villageName = {
							label: "",
							value: "",
							id: "",
						}
					},
					getbuildmanager() {
						XEAjax.get(`${curlFinance}/room/getbuildmanager?xq_id=` + this.formData.villageName.id).then(
							res => {
								if (res.code == 200) {
									let optionList = res.data;
									let newOptionList = []
									for (let i in optionList) {
										newOptionList.push({
											'label': optionList[i].userName,
											"value": optionList[i].userName,
											"id": optionList[i].userCode,
										})
									}
									this.buildingManagementList = newOptionList
								} else {
									this.$message({
										message: res.msg,
										type: 'error'
									})
								}
							});
					},
					buildquerySearch(queryString, cb) {
						var buildingManagementList = this.buildingManagementList;
						var results = queryString ? buildingManagementList.filter(this.Filter(queryString)) :
							buildingManagementList;
						// 调用 callback 返回建议列表的数据
						cb(results);
					},
					Filter(queryString) {
						return (buildingManagementList) => {
							return (buildingManagementList.value.toLowerCase().indexOf(queryString
								.toLowerCase()) === 0);
						};
					},
					addBuildingManager(item) {
						this.formData.buildingManager = item
					},
					handleCurrentChange(e) {
						this.currentPageHouse = e.currentPage
						this.pageSizeHouse = e.pageSize
						this.getBuildList()
					}
				}
			};
			var vue = Vue.extend(main);
			new vue().$mount('#app');
		}
	</script>
</html>
